<template>
	<view class="tabs">
		<view class="tab-item" :class="[index === navIndex?'active':'',item.iconClass]" v-for="(item,index) in tabs"
			:key="index" @click="navigateTo(item.link)">
			<view class="tab-icon"></view>
			<view class="tab-value">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: [String]
		},
		data() {
			return {
				tabs: [{
					title: '首页功能',
					iconClass: 'index',
					link: './index',
					icon:'tab-index.png',
					iconAtice:'tab-index-active.png'
				}, {
					title: '数据面板',
					iconClass: 'databoard',
					link: './databoard',
					icon:'tab-databoard.png',
					iconAtice:'tab-databoard-active.png'
				}],
				navIndex: 0
			}
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}
		},
		created() {
			if (this.current === 'databoard') {
				this.navIndex = 1
			} else {
				this.navIndex = 0
			}
			// console.log(route)
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/css/mixins.scss';
	$imgPath: 'business/';

	.tabs {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		@include flex;
		background-color: #fff;

		.tab-item {
			width: 50%;
			@include flex;
			flex-direction: column;

			.tab-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.tab-value {
				margin-top: 14rpx;
				font-size: 20rpx;
				color: #909399;
				line-height: 20rpx;
			}

			&.index {
				.tab-icon {
					@include image($imgPath + 'tab-index.png');
				}
			}

			&.databoard {
				.tab-icon {
					@include image($imgPath + 'tab-databoard.png');
				}
			}

			&.active {
				.tab-value {
					color: #FF4544;
				}

				&.index {
					.tab-icon {
						@include image($imgPath + 'tab-index-active.png');
					}
				}

				&.databoard {
					.tab-icon {
						@include image($imgPath + 'tab-databoard-active.png');
					}
				}
			}
		}
	}
</style>
